// 深色主题统一样式
// 解决按钮、表单、卡片颜色不统一问题

// 深色主题颜色变量
$dark-bg-primary: #1a202c;
$dark-bg-secondary: #2d3748;
$dark-bg-tertiary: #4a5568;
$dark-bg-card: #2d3748;
$dark-bg-input: #4a5568;
$dark-bg-button: #68d391;
$dark-bg-button-hover: #9ae6b4;
$dark-bg-button-secondary: #4a5568;
$dark-bg-button-danger: #fc8181;

$dark-text-primary: #e2e8f0;
$dark-text-secondary: #a0aec0;
$dark-text-muted: #718096;
$dark-text-button: #1a202c;

$dark-border-color: #4a5568;
$dark-border-light: #2d3748;

// 全局深色主题样式
body {
  background-color: transparent !important;
  color: $dark-text-primary ;
}

// Element UI 组件深色主题覆盖
.el-button {
  &.el-button--default {
    background-color: $dark-bg-button !important;
    border-color: $dark-bg-button !important;
    color: $dark-text-button !important;
    font-weight: 600 !important;

    &:hover {
      background-color: $dark-bg-button-hover !important;
      border-color: $dark-bg-button-hover !important;
    }

    &:focus {
      background-color: $dark-bg-button-hover !important;
      border-color: $dark-bg-button-hover !important;
    }
  }

  &.el-button--primary {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;

    &:hover {
      background-color: #2563eb !important;
      border-color: #2563eb !important;
    }
  }

  &.el-button--success {
    background-color: $dark-bg-button !important;
    border-color: $dark-bg-button !important;

    &:hover {
      background-color: $dark-bg-button-hover !important;
      border-color: $dark-bg-button-hover !important;
    }
  }

  &.el-button--warning {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important;

    &:hover {
      background-color: #d97706 !important;
      border-color: #d97706 !important;
    }
  }

  &.el-button--danger {
    background-color: $dark-bg-button-danger !important;
    border-color: $dark-bg-button-danger !important;

    &:hover {
      background-color: #f56565 !important;
      border-color: #f56565 !important;
    }
  }

  &.el-button--info {
    background-color: $dark-bg-button-secondary !important;
    border-color: $dark-bg-button-secondary !important;
    color: $dark-text-primary !important;

    &:hover {
      background-color: $dark-bg-tertiary !important;
      border-color: $dark-bg-tertiary !important;
    }
  }

  &.el-button--text {
    color: $dark-bg-button !important;

    &:hover {
      color: $dark-bg-button-hover !important;
    }
  }

  &:disabled {
    background-color: $dark-bg-button-secondary !important;
    border-color: $dark-bg-button-secondary !important;
    color: $dark-text-muted !important;
  }
}

// 按钮组样式
.el-button-group {
  .el-button {
    border-color: $dark-border-color !important;
  }
}

// 卡片样式
.el-card {
  background-color: $dark-bg-card !important;
  border-color: $dark-border-color !important;
  color: $dark-text-primary !important;

  .el-card__header {
    background-color: $dark-bg-secondary !important;
    border-bottom-color: $dark-border-color !important;
    color: $dark-text-primary !important;
  }

  .el-card__body {
    background-color: $dark-bg-card !important;
    color: $dark-text-primary !important;
  }
}

// 表单样式 - 完全透明
.el-form {
  background-color: transparent !important;
  background: transparent !important;

  .el-form-item__label {
    color: rgba(255, 255, 255, 0.8) !important;
  }

  .el-form-item__error {
    color: #ff4757 !important;
    z-index: 100 !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 4px !important;
    background: rgba(255, 71, 87, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 71, 87, 0.3) !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.2) !important;
    animation: error-fade-in 0.3s ease-out !important;
    white-space: nowrap !important;
  }

  .el-form-item {
    background-color: transparent !important;
    background: transparent !important;
    position: relative !important;
  }
}

// 报错动画
@keyframes error-fade-in {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

// 特定表单类的透明样式
.login-form,
.register-form {
  background-color: transparent !important;
  background: transparent !important;
}

// 强制所有表单相关元素透明
.el-form.el-form--default.el-form--label-right.login-form,
.el-form.el-form--default.el-form--label-right.register-form,
.el-form--default,
.el-form--label-right {
  background-color: transparent !important;
  background: transparent !important;
}

// 输入框样式 - 透明水晶玻璃质感（全局应用）
.el-input {
  background: transparent !important;

  .el-input__wrapper {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 4px 15px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(12px) !important;
    transition: all 0.3s ease !important;

    &:hover {
      border-color: rgba(0, 234, 255, 0.4) !important;
      background: rgba(255, 255, 255, 0.08) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 6px 20px rgba(0, 0, 0, 0.15) !important;
    }

    &.is-focus {
      border-color: rgba(0, 234, 255, 0.6) !important;
      background: rgba(255, 255, 255, 0.1) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 8px 25px rgba(0, 0, 0, 0.2),
        0 0 15px rgba(0, 234, 255, 0.2) !important;
    }
  }

  .el-input__inner {
    background-color: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    height: 40px !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;

    &::placeholder {
      color: rgba(255, 255, 255, 0.5) !important;
    }

    &:hover {
      background-color: transparent !important;
    }

    &:focus {
      background-color: transparent !important;
      box-shadow: none !important;
    }
  }

  &.is-disabled .el-input__inner {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.3) !important;
  }

  .el-input__prefix {
    color: rgba(0, 234, 255, 0.7) !important;
  }

  .el-input__suffix {
    color: rgba(255, 255, 255, 0.6) !important;
  }
}

// 选择器样式 - 透明玻璃质感
.el-select {
  .el-input__inner {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    height: 40px !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;

    &:hover {
      border-color: rgba(0, 234, 255, 0.4) !important;
      background-color: rgba(255, 255, 255, 0.08) !important;
    }

    &:focus {
      border-color: rgba(0, 234, 255, 0.6) !important;
      box-shadow: 0 0 10px rgba(0, 234, 255, 0.2) !important;
      background-color: rgba(255, 255, 255, 0.1) !important;
    }
  }

  .el-input__suffix {
    color: rgba(255, 255, 255, 0.6) !important;
  }
}

// 下拉菜单样式已移除，由各页面自定义

// 文本域样式 - 透明玻璃质感（全局应用）
.el-textarea {
  .el-textarea__inner {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    backdrop-filter: blur(12px) !important;
    transition: all 0.3s ease !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 4px 15px rgba(0, 0, 0, 0.1) !important;

    &::placeholder {
      color: rgba(255, 255, 255, 0.5) !important;
    }

    &:hover {
      border-color: rgba(0, 234, 255, 0.4) !important;
      background: rgba(255, 255, 255, 0.08) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 6px 20px rgba(0, 0, 0, 0.15) !important;
    }

    &:focus {
      border-color: rgba(0, 234, 255, 0.6) !important;
      background: rgba(255, 255, 255, 0.1) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 8px 25px rgba(0, 0, 0, 0.2),
        0 0 15px rgba(0, 234, 255, 0.2) !important;
    }
  }
}

// 表格样式
.el-table:not(.glass-dialog) {
  background-color: $dark-bg-card;
  color: $dark-text-primary;

  th {
    background-color: $dark-bg-secondary;
    color: $dark-text-primary;
    border-bottom-color: $dark-border-color;
  }

  td {
    border-bottom-color: $dark-border-color;
    background-color: $dark-bg-card;
  }

  tr {
    background-color: $dark-bg-card;

    &:hover {
      background-color: $dark-bg-tertiary;
    }
  }

  .el-table__empty-text {
    color: $dark-text-muted;
  }
}

// 分页样式
.el-pagination {
  .el-pager li {
    background-color: $dark-bg-input !important;
    color: $dark-text-primary !important;
    border-color: $dark-border-color !important;

    &:hover {
      color: $dark-bg-button !important;
    }

    &.active {
      background-color: $dark-bg-button !important;
      color: $dark-text-button !important;
    }
  }

  .btn-prev,
  .btn-next {
    background-color: $dark-bg-input !important;
    color: $dark-text-primary !important;

    &:hover {
      color: $dark-bg-button !important;
    }
  }

  .el-pagination__total,
  .el-pagination__jump {
    color: $dark-text-primary !important;
  }
}

// 对话框样式
.el-dialog {
  background-color: $dark-bg-card !important;

  .el-dialog__header {
    background-color: $dark-bg-secondary !important;
    border-bottom: 1px solid $dark-border-color !important;

    .el-dialog__title {
      color: $dark-text-primary !important;
    }

    .el-dialog__close {
      color: $dark-text-secondary !important;

      &:hover {
        color: $dark-bg-button-danger !important;
      }
    }
  }

  .el-dialog__body {
    background-color: $dark-bg-card !important;
    color: $dark-text-primary !important;
  }

  .el-dialog__footer {
    background-color: $dark-bg-card !important;
    border-top: 1px solid $dark-border-color !important;
  }
}

// 消息提示样式
.el-message {
  background-color: $dark-bg-card !important;
  border-color: $dark-border-color !important;
  color: $dark-text-primary !important;

  &.el-message--success {
    background-color: rgba(104, 211, 145, 0.1) !important;
    border-color: $dark-bg-button !important;

    .el-message__content {
      color: $dark-bg-button !important;
    }
  }

  &.el-message--error {
    background-color: rgba(252, 129, 129, 0.1) !important;
    border-color: $dark-bg-button-danger !important;

    .el-message__content {
      color: $dark-bg-button-danger !important;
    }
  }

  &.el-message--warning {
    background-color: rgba(245, 158, 11, 0.1) !important;
    border-color: #f59e0b !important;

    .el-message__content {
      color: #f59e0b !important;
    }
  }
}

// 加载样式
.el-loading-mask {
  background-color: rgba(30, 30, 30, 0.8) !important;

  .el-loading-spinner {
    .el-loading-text {
      color: $dark-text-primary !important;
    }
  }
}

// 菜单样式
.el-menu {
  background-color: $dark-bg-secondary !important;
  border-right-color: $dark-border-color !important;

  .el-menu-item {
    color: $dark-text-secondary !important;

    &:hover {
      background-color: $dark-bg-tertiary !important;
      color: $dark-text-primary !important;
    }

    &.is-active {
      background-color: $dark-bg-button !important;
      color: $dark-text-button !important;
    }
  }

  .el-submenu__title {
    color: $dark-text-secondary !important;

    &:hover {
      background-color: $dark-bg-tertiary !important;
      color: $dark-text-primary !important;
    }
  }
}

// 标签页样式
.el-tabs {
  .el-tabs__header {
    background-color: transparent !important;

    .el-tabs__nav {
      background-color: transparent !important;
    }

    .el-tabs__item {
      color: $dark-text-secondary !important;

      &:hover {
        color: $dark-text-primary !important;
      }

      &.is-active {
        color: $dark-bg-button !important;
      }
    }

    .el-tabs__active-bar {
      background-color: $dark-bg-button !important;
    }
  }

  .el-tabs__content {
    background-color: transparent !important;
    color: $dark-text-primary !important;
  }
}

// 面包屑样式
.el-breadcrumb {
  .el-breadcrumb__item {
    .el-breadcrumb__inner {
      color: $dark-text-secondary !important;

      &:hover {
        color: $dark-bg-button !important;
      }
    }

    &:last-child .el-breadcrumb__inner {
      color: $dark-text-primary !important;
    }
  }

  .el-breadcrumb__separator {
    color: $dark-text-muted !important;
  }
}

// 步骤条样式
.el-steps {
  .el-step__title {
    color: $dark-text-primary !important;
  }

  .el-step__description {
    color: $dark-text-secondary !important;
  }

  .el-step__icon {
    background-color: $dark-bg-input !important;
    border-color: $dark-border-color !important;
    color: $dark-text-primary !important;
  }

  .el-step.is-process .el-step__icon {
    background-color: $dark-bg-button !important;
    border-color: $dark-bg-button !important;
    color: $dark-text-button !important;
  }

  .el-step.is-finish .el-step__icon {
    background-color: $dark-bg-button !important;
    border-color: $dark-bg-button !important;
    color: $dark-text-button !important;
  }
}

// 开关样式
.el-switch {
  .el-switch__core {
    background-color: $dark-bg-input !important;
    border-color: $dark-border-color !important;
  }

  &.is-checked .el-switch__core {
    background-color: $dark-bg-button !important;
    border-color: $dark-bg-button !important;
  }
}

// 滑块样式
.el-slider {
  .el-slider__runway {
    background-color: $dark-bg-input !important;
  }

  .el-slider__bar {
    background-color: $dark-bg-button !important;
  }

  .el-slider__button {
    background-color: $dark-bg-button !important;
    border-color: $dark-bg-button !important;
  }
}

// 评分样式
.el-rate {
  .el-rate__icon {
    color: $dark-text-muted !important;
  }

  .el-rate__icon.hover {
    color: $dark-bg-button !important;
  }
}

// 颜色选择器样式
.el-color-picker {
  .el-color-picker__trigger {
    background-color: $dark-bg-input !important;
    border-color: $dark-border-color !important;
  }
}

// 穿梭框样式
.el-transfer {
  .el-transfer-panel {
    background-color: $dark-bg-card !important;
    border-color: $dark-border-color !important;

    .el-transfer-panel__header {
      background-color: $dark-bg-secondary !important;
      color: $dark-text-primary !important;
      border-bottom-color: $dark-border-color !important;
    }

    .el-transfer-panel__body {
      background-color: $dark-bg-card !important;
    }

    .el-transfer-panel__item {
      color: $dark-text-primary !important;

      &:hover {
        background-color: $dark-bg-secondary !important;
      }
    }
  }
}

// 时间线样式
.el-timeline {
  .el-timeline-item__timestamp {
    color: $dark-text-secondary !important;
  }

  .el-timeline-item__content {
    color: $dark-text-primary !important;
  }

  .el-timeline-item__node {
    background-color: $dark-bg-button !important;
    border-color: $dark-bg-button !important;
  }
}

// 骨架屏样式
.el-skeleton {
  .el-skeleton__item {
    background: linear-gradient(90deg, $dark-bg-secondary 25%, $dark-bg-tertiary 50%, $dark-bg-secondary 75%) !important;
  }
}

// 空状态样式
.el-empty {
  .el-empty__description {
    color: $dark-text-secondary !important;
  }
}

// 结果页样式
.el-result {
  .el-result__title {
    color: $dark-text-primary !important;
  }

  .el-result__subtitle {
    color: $dark-text-secondary !important;
  }
}

// 统计数值样式
.el-statistic {
  .el-statistic__content {
    color: $dark-text-primary !important;
  }

  .el-statistic__head {
    color: $dark-text-secondary !important;
  }
}
